<template>
  <template v-for="subitem in routeArr" :key="subitem.path">
    <el-sub-menu v-if="subitem.children && subitem.children.length > 0" :index="subitem.path">
      <template #title>
        <i class="iconfont" :class="[subitem.icon]"></i>
        <span>{{ subitem.labol }}</span>
      </template>

      <submenu :routeArr="subitem.children"></submenu>
    </el-sub-menu>

    <el-menu-item :index="subitem.path" v-else @click="handleClickMenu(subitem)">
      <i class="iconfont" :class="[subitem.icon]" v-if="subitem.icon"></i>
      <template #title>
        <span>{{ subitem.labol }}</span>
      </template>
    </el-menu-item>

  </template>
</template>

<script  setup>
// import SubMenu from "./"
import { useRouter, useRoute } from "vue-router"
import {Tabs} from "@/stores/tabs.js"
// 添加tabs
let mTabs = Tabs()

let props = defineProps({
  routeArr: {
    type: Array,
    default: []
  }
})

// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";

let router = useRouter()
let route = useRoute()
let handleClickMenu = (subItem) => {
  // console.log(subItem)
  // 添加tabs
  mTabs.addTabsList(subItem)
  // console.log(route.meta)
  router.push(subItem.path);
}

</script>

<style scoped lang="scss">
.iconfont {
  font-size: 20px;
  margin-right: 10px;
}
</style>